import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
import CSSModules from 'react-css-modules';

import styles from './Tabs.scss';

@immutableRenderDecorator
@CSSModules(styles, {allowMultiple: true})
class TabNav extends Component {

  static propTypes = {
    prefixClass: PropTypes.string,
    panels: PropTypes.object,
    onTabClick: PropTypes.func,
    activeIndex: PropTypes.number,
  }
  constructor(props) {
    super(props);
  }

  getTabs() {
	  const { prefixClass, activeIndex, panels, onTabClick } = this.props;
    const result = panels.map((panel) => {
      if (!panel) return (
         <li></li>
       );
      const index = parseInt(panel.props.index, 10);
      const classes = classnames({
        [`${prefixClass}-tab`]: true,
        [`${prefixClass}-active`]: activeIndex === panel.props.index,
       });
       return (
        <li
      	  styleName={classes}
      	  onClick={onTabClick.bind(this, index)}
        >
      	  {panel.props.tab}
        </li>
       )
    })
    return React.Children.toArray(result);
  }

  render() {
    const { prefixClass,} = this.props;
		const classes = classnames({
		  [`${prefixClass}-nav`]: true,
	  })
	  const rootClasses = classnames({
		  [`${prefixClass}-bar`]: true,
	  })
    return (
      <div
	      role="tablist"
	      styleName={rootClasses}
      >
	      <ul styleName={classes}>
		      { this.getTabs() }
	      </ul>
      </div>
    )
  }

}

export default TabNav;
